<script>
import {userLogin} from "@/api/login/login";
import store from "@/store";
import cache from "@/plugins/cache";
import {userinfo} from "@/constants/userConstant";
export default {
  name: "login-index",
  data(){
    return{
      logingOff:false,
      user:{
        username:undefined,
        password:undefined
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
    }
  },
  methods:{
    login(){
      this.logingOff = true;
      let userName = this.user.username;
      let password = this.user.password;

      if (userName && password){
        // 发送到后台
        userLogin(this.user).then(resp=>{
          let data = resp.data
          cache.local.setJSON(userinfo,data)
          this.logingOff = false;
          this.$router.push({ path:  "/home" }).catch(()=>{});
        })
      }else {
        this.$model.msgWarning("用户名或密码不能为空")
      }

    }
  }


}
</script>

<template>
  <div id="login-app">
    <div class="centered-div">
<!--      <div class="imgBox">-->
<!--          <img id="logopc" style="width: 80px;height: 80px;" src="@/assets/img/logo.png">-->
<!--      </div>-->
      <p class="mainTit">外部环境智能检测平台</p>
      <el-form ref="loginFrom" :model="user" >
          <el-form-item prop="username" class="item-box">
            <el-input
                style="width: 300px;"
                type="text"
                placeholder="用户名"
                prefix-icon="el-icon-user-solid"
                v-model="user.username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="item-box">
            <el-input
                style="width: 300px;"
                type="password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                v-model="user.password">
            </el-input>
          </el-form-item>
        <p class="item-box btn-box">
          <el-button class="login" @click="login" v-loading="logingOff" element-loading-text="登录中"  element-loading-spinner="el-icon-loading">
            登录
          </el-button>
        </p>
      </el-form>

    </div>
  </div>
</template>

<style scoped>

  #login-app {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    height: 100vh;          /* 使容器高度占满整个视口 */
    background-image: url('@/assets/img/tielulogin.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .centered-div {
    width: 550px;
    height: 400px;
    background-image: url('@/assets/img/login-form-bac.png');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: center;
  }

  .imgBox {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: -30px;
    margin-left: -30px;
  }

  .mainTit {
    margin: 70px 0 50px 0;
    font-size: 24px;
    color: #fff;
    font-family: PingFangSC-Regular;
  }

  .mainBox .item-box {
    width: 300px;
    margin-bottom: 55px;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .mainBox .btn-box {
    margin-top: 25px;
  }

  .login{
    width: 300px;
    height: 40px;
    background: #70c2ec;
    box-shadow: 3px 3px 8px 0 rgba(80, 166, 184, 0.44);
    border: 1px solid #70c2ec;
    color: #fff;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
  }


</style>
